<template>
	<view>
		<u-popup mode="right" :border-radius="20" v-model="show" @close="close">
			<!-- <uni-popup ref="popup" background-color="#fff"> -->
				<view class="popup-content">
					<view class="screening-condition">
						<view class="screening-title">技师距离(km)</view>
						<view class="slider-content">
							<view>{{screening.slidernum}}km</view>
							<slider block-size="18" activeColor="#EF5233" :value="screening.slidernum"
								@change="sliderChange" step="1" />
							<!-- <hao-slider :imgSliderUrl="'https://qiniu-cdn.maeiyun.com/imgs/massage/juli.png'" :sliderBlockSize='30' :vlaue="screening.slidernum" :min="1" :max="100" sliderLeftColor="#E54B42"  :sliderHeight="14" ref="haoSlider"></hao-slider> -->
						</view>
					</view>
					<view class="screening-condition">
						<view class="screening-title">技师性别</view>
						<view class="sex-content">
							<view class="else-sex">
								<view @click="changeSex(2)"
									:class="screening.sex == 2?'sex-box sex-box-select':'sex-box' ">
									<!-- <image src="../../static/jishi/nv.png" mode=""></image> -->
									<view>女技师</view>
								</view>
								<view @click="changeSex(1)"
									:class="screening.sex == 1?'sex-box sex-box-select':'sex-box' ">
									<!-- <image src="../../static/jishi/nan.png" mode=""></image> -->
									<view>男技师</view>
								</view>
							</view>
						</view>
					</view>
					<view class="screening-condition">
						<view class="screening-title">技师年龄</view>
						<view class="age-content">
							<view class="age-fillin">
								<input type="number" v-model="minAge" placeholder="最低年龄" />
								<view class="lines"></view>
								<input type="number" v-model="maxAge" placeholder="最高年龄" />
							</view>
							<view class="age-list">
								<view @click="agechang(item)" :class="ageid === item.id?'selected-age':''"
									v-for="(item,index) in ageList" :key="index">{{item.age}}</view>
							</view>
						</view>
					</view>
					<view class="screening-condition" style="border: 0;">
						<view class="screening-title">搜索技师</view>
						<input type="text" v-model="screening.elsename" class="technician-name" placeholder="请输入技师名称" />
					</view>
					<view class="choose-btns">
						<view class="chongzhi" @click="reset">重置</view>
						<view class="confirm" @click="affirm">确定</view>
					</view>
				</view>
			</u-popup>
	</view>
</template>
<script>
	export default {
		name: "shaixuanPopup",
		data() {
			return {
				screening: { //筛选条件
					slidernum: 0, //距离
					sex: 0, //all 1女 2男
					age: "",
					elsename: "",
					sort: 0
				},
				ageList: [{
						id: 0,
						age: "18-30"
					},
					{
						id: 1,
						age: "31-40"
					},
					{
						id: 2,
						age: "41-60"
					},
				],
				ageid: '',
				minAge: "",
				maxAge: "",
				show:false
			}
		},
		mounted() {
			this.screening.slidernum = 0
			this.screening.sex = 0
			this.screening.age = ''
			this.screening.elsename = ''
			this.$emit("massageResult", this.screening)
		},
		methods: {
			sliderChange(data) {
				this.screening.slidernum = data.detail.value
			},
			close(){
				this.$emit('closePopup')
			},
			open() {
				this.show = true
				// this.$refs.popup.open('right')
			},
			changeSex(type){
				this.$set(this.screening,'sex',this.screening.sex == type?0: type)
				
			},
			agechang(item) {
				
				this.ageid = item.id
				this.screening.age = item.age
			},
			sliderchang(data) {
				
				this.screening.slidernum = data
			},
			reset() {
				this.screening.slidernum = 0
				this.screening.sex = 0
				this.screening.age = ''
				this.screening.elsename = ''
				this.ageid = ''
				this.$emit("massageResult", this.screening)
				// this.$refs.popup.close()
				this.show = false
			},
			affirm() {
				if (this.minAge && this.maxAge) {
					this.screening.age = this.minAge + "-" + this.maxAge
				}
				this.$emit("massageResult", this.screening)
				// this.$refs.popup.close()
				this.show = false
			},
		}
	}
</script>

<style lang="scss">
	//筛选弹窗
	.popup-content {
		width: 511rpx;
		padding-top: 80rpx;
		position: relative;
		z-index: 100000;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		height: 100vh;
		.screening-condition {
			padding: 33rpx;
			border-bottom: 30rpx solid #D8D8D8;

			.screening-title {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}

			.slider-content {
				margin-top: 55rpx;
				padding-bottom: 30rpx;
				text-align: center;
				color: #EF5233;
			}

			.sex-content {
				margin-top: 30rpx;

				.all-ok {
					width: 138rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1rpx solid #D7D7D7;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					text-align: center;
					line-height: 60rpx;
				}

				.all-ok-select {
					background: rgba(239, 82, 51, 0.1);
					border-radius: 30rpx;
					border: 1rpx solid #EF5233;
					color: #EF5233;
				}
				.else-sex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 50rpx;
					.sex-box {
						width: 210rpx;
						height: 60rpx;
						border-radius: 30rpx;
						border: 1rpx solid #D7D7D7;
						display: flex;
						align-items: center;
						text-align: right;
						position: relative;
						view {
							width: 100%;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #000000;
							text-align: center;
						}

					}

					.sex-box-select {
						background: rgba(239, 82, 51, 0.1);
						border-radius: 30rpx;
						border: 1rpx solid #EF5233;

						view {
							color: #EF5233;
						}
					}
				}
			}

			//
			.age-fillin {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.lines {
					width: 18rpx;
					height: 1rpx;
					background-color: #979797;
					margin: 0 8rpx;
				}

				input {
					width: 210rpx;
					height: 60rpx;
					background: #F3F3F3;
					border-radius: 30rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					text-align: center;
				}
			}

			.age-list {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 30rpx;

				view {
					width: 138rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1rpx solid #D7D7D7;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 60rpx;
					text-align: center;
				}

				.selected-age {
					background: rgba(239, 82, 51, 0.1);
					border-radius: 30rpx;
					border: 1rpx solid #EF5233;
					color: #EF5233;
				}
			}

			.technician-name {
				width: 452rpx;
				height: 60rpx;
				background: #F3F3F3;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				text-align: center;
				margin-top: 30rpx;
			}
		}

		//
		.choose-btns {
			background: url('../../static/jishi/btn-bg.png')no-repeat;
			background-size: 100% 100%;
			width: 448rpx;
			height: 86rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			bottom: 80rpx;
			left: 0;
			right: 0;

			view {
				width: 50%;
				text-align: center;
			}

			.chongzhi {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.confirm {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>